<style lang="scss" scoped>
@import "../../css/list.scss";
nav {
  li {
    height: 0.6rem;
  }
}
.empty {
  height: 2rem;
}
</style>

<template>
  <div class="customer_plan full bgfff">
    <nav class="font-16">
      <ul class="flex-col">
        <li class="box-center box1" :class="{cred:call.has}" @click="showCut(0)">打电话</li>
        <li class="box-center box1" :class="{cred:report.has}" @click="showCut(1)">报备</li>
        <li class="box-center box1" :class="{cred:see.has}" @click="showCut(2)">带看</li>
        <li class="box-center box1" :class="{cred:sign.has}" @click="showCut(3)">签约</li>
      </ul>
    </nav>
    <ul class="customer_list" v-show="call.has">
      <li class="customer_it flex-col border-t" v-for="(it,i) in call.list" :key="i" @click="openClientInfo(it.clientCode)">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center cfff font-18">{{it.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-row padding-tb5">
          <div class="box1">
            <span class="font-w font-16">{{it.clientName}}-{{it.clientPhone}}</span>
            <!-- <span class="cred f-r">{{it.plan}}</span> -->
          </div>
          <div class="tags">
            <span>已匹配</span>
          </div>
        </div>
      </li>
      <li class="empty c82 box-center" v-show="!call.list.length">暂没有数据</li>
    </ul>
    <ul class="customer_list" v-show="report.has">
      <li class="customer_it flex-col border-t" v-for="(it,i) in report.list" :key="i" @click="openClientInfo(it.clientCode)">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center cfff font-18">{{it.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-row padding-tb5">
          <div class="box1">
            <span class="font-w font-16">{{it.clientName}}-{{it.clientPhone}}</span>
            <!-- <span class="cred f-r">{{it.plan}}</span> -->
          </div>
          <div class="tags">
            <span>已匹配</span>
            <span>已报备</span>
          </div>
        </div>
      </li>
      <li class="empty c82 box-center" v-show="!report.list.length">暂没有数据</li>
    </ul>
    <ul class="customer_list" v-show="see.has">
      <li class="customer_it flex-col border-t" v-for="(it,i) in see.list" :key="i" @click="openClientInfo(it.clientCode)">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center cfff font-18">{{it.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-row padding-tb5">
          <div class="box1">
            <span class="font-w font-16">{{it.clientName}}-{{it.clientPhone}}</span>
            <!-- <span class="cred f-r">{{it.plan}}</span> -->
          </div>
          <div class="tags">
            <span>已匹配</span>
            <span>已报备</span>
            <span>已带看</span>
          </div>
        </div>
      </li>
      <li class="empty c82 box-center" v-show="!see.list.length">暂没有数据</li>
    </ul>
    <ul class="customer_list" v-show="sign.has">
      <li class="customer_it flex-col border-t" v-for="(it,i) in sign.list" :key="i" @click="openClientInfo(it.clientCode)">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center cfff font-18">{{it.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-row padding-tb5">
          <div class="box1">
            <span class="font-w font-16">{{it.clientName}}-{{it.clientPhone}}</span>
            <!-- <span class="cred f-r">{{it.plan}}</span> -->
          </div>
          <div class="tags">
            <span>已匹配</span>
            <span>已报备</span>
            <span>已带看</span>
            <span>已签约</span>
          </div>
        </div>
      </li>
      <li class="empty c82 box-center" v-show="!sign.list.length">暂没有数据</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "customer_plan",
  data() {
    return {
      pageSize: 10,
      pageIndex: "0",
      call: {
        has: false,
        page: 0,
        list: []
      },
      report: {
        has: false,
        page: 0,
        list: []
      },
      sign: {
        has: false,
        page: 0,
        list: []
      },
      see: {
        has: false,
        page: 0,
        list: []
      }
    };
  },
  components: {},
  watch: {},
  computed: {
    //计算属性
  },
  created() {
    //实例创建钩子

    let that = this;
    this.pageIndex = this.$route.query.id;
    switch (parseInt(this.pageIndex)) {
      case 0:
        that.call.has = true;
        break;
      case 1:
        that.report.has = true;
        break;
      case 2:
        that.see.has = true;
        break;
      default:
        that.sign.has = true;
        break;
    }
    this.getList();
  },
  mounted() {
    // //首次渲染钩子
    // let that = this;
    // this.$nextTick(() => {
    //   that.getList();
    // });
  },
  methods: {
    //自定义函数
    showCut(i) {
      let that = this;
      that.call.has = false;
      that.report.has = false;
      that.see.has = false;
      that.sign.has = false;
      that.pageIndex = i;

      switch (i) {
        case 0:
          that.call.has = true;
          if (that.report.page === 0) that.getList();
          break;
        case 1:
          that.report.has = true;
          if (that.report.page === 0) that.getList();
          break;
        case 2:
          that.see.has = true;
          if (that.see.page === 0) that.getList();
          break;
        default:
          that.sign.has = true;
          if (that.sign.page === 0) that.getList();
          break;
      }
    },
    // 获取对应列表的数据
    getList(has = false) {
      let that = this,
        lookStatus = {
          "0": 0, //报备状态 0已通话 1已匹配 2 已报备 3 已看房 4 已再次看房（查看再次看房的次数） 5 已签约 6 退款
          "1": 2,
          "2": 3,
          "3": 5
        },
        list = {
          "0": that.call,
          "1": that.report,
          "2": that.see,
          "3": that.sign
        };

      let page = 0;
      switch (parseInt(that.pageIndex)) {
        case 0:
          page = this.call.page = ++this.call.page;
          break;
        case 1:
          page = this.report.page = ++this.report.page;
          break;
        case 2:
          page = this.see.page = ++this.see.page;
          break;
        default:
          page = this.sign.page = ++this.sign.page;
          break;
      }

      if (has && list[this.pageIndex].page > list[this.pageIndex].total) {
        this.layer("已加载全部", "m");
      }

      this.http
        .post("userandclient/list", {
          limit: that.pageSize,
          page: list[this.pageIndex].page,
          lookHouseStatus: lookStatus[that.pageIndex],
          select_type: that.$route.query.i
        })
        .then(res => {
          let data,
            total = res.data.totalPage;
          if (has) {
            data = list[that.pageIndex].list.push(res.data.list);
          } else {
            data = res.data.list;
          }

          switch (parseInt(that.pageIndex)) {
            case 0:
              that.call.list = data;
              that.call.total = total;
              break;
            case 1:
              that.report.list = data;
              that.report.total = total;
              break;
            case 2:
              that.see.list = data;
              that.see.total = total;
              break;
            default:
              that.sign.list = data;
              that.sign.total = total;
              break;
          }
        });
    },
    openClientInfo(id) {
      this.$router.push({
        path: "/customer_info",
        query: {
          id
        },
        meat: {
          title: "客户详情"
        }
      });
    }
  }
};
</script>


